<template>
	<div class="wrap">
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home/homeView' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>系统设置</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="botBox">
			<div class="firstBox">
				<span>系统组件视觉大小</span>
				<el-button-group>
				  <el-button size="medium">正常</el-button>
				  <el-button size="medium">小号</el-button>
				  <el-button size="medium">超小号</el-button>
				</el-button-group>
			</div>
			<div class="secondBox">
				<span>收起导航栏</span>
				<el-switch
				  v-model="flag"
				  active-color="#409eff"
				  inactive-color="#dcdfe6">
				</el-switch>
			</div>
			<div class="thirdBox">
				<span>主页显示疫情地图</span>
				<el-switch
				  v-model="value"
				  active-color="#409eff"
				  inactive-color="#dcdfe6">
				</el-switch>
			</div>
			<el-button class="btn" type="primary">保存并应用</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: true,
				flag: false
			}
		}
	};
</script>

<style lang="scss" scoped>
	*{margin: 0;padding: 0;}
	.wrap {
		padding: 15px;
		.botBox {
			width: 87vw;
			height: 30vh;
			box-shadow: 0 0 8px #ccc;
			margin-top: 15px;
			border-radius: 3px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 15px 20px;
			span {
				color: #7b7e83;
				margin-right: 10px;
			}
			.btn {
				width: 110px;
				height: 35px;
			}
			.firstBox {
				.el-button {
					width: 60px;
					height: 33px;
				}
			}
		}
	}
</style>